<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">商品列表</h1>
    
    <!-- 加载状态 -->
    <div v-if="productStore.loading" class="text-center py-8">
      <p>加载中...</p>
    </div>
    
    <!-- 错误提示 -->
    <div v-else-if="productStore.error" class="text-red-500 text-center py-8">
      <p>加载失败，请稍后重试</p>
    </div>
    
    <!-- 商品列表 -->
    <div v-else class="grid grid-cols-1 md:grid-cols-4 gap-6">
      <div v-for="product in productStore.products" 
           :key="product.id" 
           class="border rounded-lg p-4 hover:shadow-lg transition">
        <img :src="product.image" 
             :alt="product.title" 
             class="w-full h-48 object-contain mb-4">
        <h2 class="text-lg font-semibold mb-2 line-clamp-2">{{ product.title }}</h2>
        <p class="text-gray-600 mb-2">¥{{ product.price }}</p>
        <div class="flex justify-between items-center">
          <router-link :to="`/product/${product.id}`"
                      class="text-blue-500 hover:text-blue-700">
            查���详情
          </router-link>
          <button @click="cartStore.addToCart(product)"
                  class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
            加入购物车
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useProductStore } from '../store/productStore'
import { useCartStore } from '../store/cartStore'

const productStore = useProductStore()
const cartStore = useCartStore()

onMounted(() => {
  productStore.fetchProducts()
})
</script> 